import { useCallback, useEffect, useRef, useState } from "react";
import BasicContainer from "@/components/Antd";
import Search from "./Search";
import Table from "./Table";
import Drawer from "./Drawer";
import Modal from "./Modal";
import type { UserTable } from "./Table/index.d";
import { useCallbackState } from "@/utils/hook";
import { nanoid } from "nanoid";
import { generateRandomIp, getRandomElement, getRandomPhone } from "./utils";
import { addKey } from "@/utils/tools";
import avatarUrl from "@assets/img/avatar.jpg";
export let queryParams: any = {};
const User: React.FC = () => {
  const [tableData, setTableData] = useState<UserTable[]>([]);
  const DrawerRefs: any = useRef(null);
  const ModalRefs: any = useRef(null);
  const showDrawer = (type: any, record?: any) =>
    DrawerRefs.current.openDrawer(type, record);
  const showModal = (type: any, record: any) => {
    ModalRefs.current.openModal(type, record);
  };
  const handleAction = ({ type, record }: any) => {
    switch (type) {
      case "add":
        console.log("新增用户", DrawerRefs.current);
        showDrawer(type);
        break;
      case "update":
        console.log("更新用户");
        showDrawer(type, record);
        break;
      case "detail":
        console.log("用户详情");
        showDrawer(type, record);
        break;
      case "delete":
        console.log("删除用户");
        showModal(type, record);
        break;
      case "disabled":
        console.log("禁用用户");
        showModal(type, record);
        break;
    }
  };
  const fetchList = async () => {
    console.log("查询参数", queryParams);
    const newTableData: any[] = [];
    setTimeout(() => {
      for (let i = 0; i <= 50; i++) {
        newTableData.push({
          name: "张三" + i,
          id: nanoid(8),
          status: getRandomElement(),
          sex: getRandomElement(),
          ip: generateRandomIp(),
          phone: getRandomPhone(),
          wechat: "Aug25th_X",
          avatar: avatarUrl,
          job: "程序员" + i,
          wifeName: "大漂亮" + i,
          sonName: "李四" + i,
          daughterName: "王五" + i,
          fatherName: "赵六" + i,
          motherName: "孙七" + i,
          grandpaName: "周八" + i,
          grandmaName: "吴九" + i,
          ancestorName: "郑十" + i,
          age: 32,
          address: "中国广东省深圳市宝安区西乡街道流塘社区62号麻布村",
          tags: ["游戏", "电影"],
        });
      }
      setTableData(addKey(newTableData));
      setTablePage({ ...tablePage, total: newTableData.length });
    }, 300);
  };

  const [tablePage, setTablePage] = useCallbackState({
    total: 0,
    current: 1,
    pageSize: 10,
  });
  const initPage = () => {
    queryParams.page = tablePage.current;
    queryParams.page_size = tablePage.pageSize;
    fetchList();
  };
  const refreshTable = useCallback((params: any) => {
    console.log("refreshTable", params);
    queryParams = { ...queryParams, ...params };
    setTablePage({ ...tablePage, current: 1 });
  }, []);
  useEffect(() => {
    initPage();
  }, [tablePage.current, tablePage.pageSize, queryParams]);

  return (
    <BasicContainer>
      <Search refreshTable={refreshTable} handleAction={handleAction} />
      <Table
        tableData={tableData}
        handleAction={handleAction}
        fetchList={fetchList}
        tablePage={tablePage}
        setTablePage={setTablePage}
      />
      <Drawer
        ref={DrawerRefs}
        fetchList={fetchList}
        refreshTable={refreshTable}
      />
      <Modal ref={ModalRefs} />
    </BasicContainer>
  );
};
export default User;
